<template>
<div class="TTMdiv1">
    <div class="TTMdiv2">-----这是一个测试-----</div>
    <div class="TTMdiv3" @click="goPxTake_outTest">
        <img src="../../../assets/ttimg/ttmian.jpg" class="mainimg">
        <div style="margin-left:135px">
            <div>
                <span style="font-weight:700;">上海老馄饨(第二食堂店)</span>
            </div>
            <div>
                <span style="color: rgb(235, 99, 36);">5.0</span><span style="color: rgb(235, 99, 36); font-size:14px">分</span>
                <span class="text1" style="margin-left:10px">月销6543</span>
                <span class="text1" style="float:right;margin-right:15px">31分钟 100m</span>
            </div>
            <div class="text1">
                <span>起送￥8</span><span style="margin-left:10px">免配送费</span>
            </div>
            <div style="margin-top: 5px;">
                <span class="text2">"花生酱拌面,非常好吃,干净卫生"</span>
            </div>
            <div style="margin-top: 10px;font-size:11px">
                <span class="text3">21减1 <span style="opacity: 0.3;">|</span> 29减2</span>
                <span class="text4">
                    <img src="../../../assets/ttimg/crown.png" class="crown">4元无门槛</span>
                <span class="text5">食安险</span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name:'PxTTinMain',
    methods:{
        goPxTake_outTest(){
            this.$router.push({name:'PxTake_outTest'})
        }
    },
}
</script>

<style scoped>
.TTMdiv1{
    padding-top: 1px;
    height: 250px;
    background-color: #f6ccc0;
}
.TTMdiv2{
    margin-top: 20px;
    font-size: 12px;
    margin-bottom: 20px;
    text-align: center;
}
.TTMdiv3{
    margin-right: 5px;
    border-radius: 10px;
    padding-left: 8px;
    margin-left: 5px;
    padding-bottom: 15px;
    padding-top: 10px;
    background-color: white;
}
.mainimg{
    width: 120px;
    height: 120px;
    border-radius: 10px;
    position: absolute;
}
.text1{
    color: rgb(112, 112, 112);
    font-size: 14px;
}
.text2{
    color: rgb(235, 99, 36);
    font-size: 13px;
    background-color: rgb(255, 229, 219);
    padding: 3px;
    padding-right: 8px;
    padding-left: 8px;
    border-radius: 4px;
}
.text3{
    color: rgb(255, 64, 64);
    padding: 1px;
    padding-right: 3px;
    padding-left: 3px;
    border: 1px solid rgb(255, 156, 156);
    border-radius: 3px;
}
.crown{
    width: 13px;
}
.text4{
    margin-left: 5px;
    color: rgb(218, 146, 12);
    padding: 1px;
    padding-left: 3px;
    padding-right: 3px;
    border: 1px solid rgb(255, 181, 111);
    border-radius: 3px;
}
.text5{
    color: rgb(87, 87, 87);
    margin-left: 5px;
    padding: 1px;
    padding-right: 3px;
    padding-left: 3px;
    border: 1px solid rgb(112, 112, 112);
    border-radius: 3px;
}
</style>